<template>
  <div>
    <CommentList v-if='userinfo.openId' type='user' :comments='comments'></CommentList>
    <div v-if='userinfo.openId'>
      <div class="page-title">我的图书</div>
      <Card v-for="book in books" :key="book.id" :book='book'></Card>
      <div v-if="!books.length" class="text-footer">
        暂未添加任何书籍，快去添加几本吧！
      </div> 
    </div>
    <MLoading :showLoading='showLoading'></MLoading>
  </div>
</template>

<script>
import { get } from '@/util'
import CommentList from '@/components/CommentList'
import MLoading from '@/components/MLoading'
import Card from '@/components/Card'
export default {
  data() {
    return {
      comments: [],
      books: [],
      userinfo: '',
      showLoading: false
    }
  },
  components: {
    CommentList,
    MLoading,
    Card
  },
  methods: {
    init() {
      wx.showNavigationBarLoading()
      this.getComments()
      this.getBooks()
      wx.hideNavigationBarLoading()
    },
    async getComments() {
      const comments = await get('/weapp/commentlist', {
        openid: this.userinfo.openId
      })
      this.comments = comments.list || []
    },
    async getBooks() {
      const books = await get('/weapp/booklist', {
        openid: this.userinfo.openId
      })
      this.books = books.list || []
    }
  },
  onPullDownRefresh() {
    this.init()
    wx.stopPullDownRefresh()
  },
  // mounted 只是进行一次， onshow 显示就执行
  onShow() {
    if (!this.userinfo.openId) {
      let userinfo = wx.getStorageSync('userInfo')
      if (userinfo) {
        this.userinfo = userinfo
        this.init()
      }
    }
  }
}
</script>

<style>
</style>
